
<template>
  <div class="sale">
    <div class="top_button">
      <div class="partition"></div>
    </div>

    <el-table
      :data="sale"
      border
      height="calc(100vh - 90px)"
      v-loading="isres"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
      style="width: 100%"
      :show-summary=true
      :summary-method="getSummaries"
    >
      <el-table-column type="index" width="50" label="序号"></el-table-column>
      <el-table-column
        v-for="(col, i) in cols"
        :key="i"
        :prop="col"
        :label="col"
        sortable
      ></el-table-column>
      <el-table-column align="right"  width="140" type="expand">
        <template #header>
          修改
        </template>
        <template #default="props">
          <el-table
            style="width: 100%"
            border
            :data="
              alldata.filter((data) => {
                if (!data['商品编码']) {
                  return;
                }
                return (
                  !props.row['商品编码'] ||
                  data['商品编码'].includes(props.row['商品编码'])
                );
              })
            "
          >
            <el-table-column
              type="index"
              width="50"
              label="序号"
            ></el-table-column>
            <el-table-column
              v-for="(col, i) in slotcols"
              :key="i"
              :prop="col"
              :label="col"
              sortable
            ></el-table-column>
            <el-table-column fixed="right" width="200">
              <template #default="scope">
                <div class="update" style="display:flex;">
                <div>
                  <el-input
                    v-model="scope.row.inputdqr"
                    tr="current-row-key"
                    placeholder="修改到期日"
                    class="num"
                  ></el-input>
                  <el-input
                    v-model="scope.row.inputnum"
                    tr="current-row-key"
                    placeholder="修改数量"
                    class="num"
                  ></el-input>
                </div>

                <el-button
                  class="baocun"
                  @click="
                    preservation(
                      scope.row.id,
                      scope.row['数量'],
                      scope.row['到期日'],
                      scope.row.inputnum,
                      scope.row.inputdqr
                    )
                  "
                  type="primary"
                  plain
                  >保存</el-button
                >
                </div>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <tool :multipleTable="sale"></tool>
</template>
<script>
import { reactive, toRefs } from "vue";
import { imptable,Inventory, updqr } from "@/api/pandian";
import { ElMessage } from "element-plus";
import tool from "./components/tool";
export default {
  components: {
    tool,
  },
  setup() {
    const data = reactive({
      cols: [],
      sale: [],
      isres: false,
      search: "",
      alldata:[],
      slotcols:[],
    });
    const loaded = async () => {
      data.isres = true;

      const result = await imptable.get();
      data.isres = false;
      if (result.data.length == 0) {
        data.sale = [];
        ElMessage.success({
          message: "还没有盘呢",
          type: "success",
        });
      } else {
        data.sale = result.data;
        data.cols = Object.keys(result.data[0]);
      }
      const res = await Inventory.get();
      data.alldata = res.data.map((o) => {
          return {
             id:o.id, 
             盘点人:o.user1, 
             仓库:o.ck,
             商品编码:o.pc,
             商品名称:o.pn,
             到期日:o.dqr_dd,
             数量:o.pd, 
          };
        });
      data.slotcols = Object.keys(data.alldata[0]);
    };
    const getSummaries = (param) => {
      const { columns,data } = param;
      const sums = [];
      columns.forEach((column, index) => {
          if (index === 0) {
          sums[index] = "合计";
          return;
        }
        if (index === 4) {
        const values = data.map(item => Number(item[column.property]));
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr);
              if (!isNaN(value)) {
                return prev + curr;
              } else {
                return prev;
              }
            }, 0);
            }
      });
      return sums;
    };
    const preservation = async (id, num, dqr, newnum, newdqr) => {
      const result = await updqr.post({
        id,
        upnum: newnum ? newnum : num,
        updqr: newdqr ? newdqr : dqr,
      });
      if (result.code == 200) {
        ElMessage.success({
          message: "恭喜你，这是一条成功消息",
          type: "success",
        });
        data.alldata.filter(
          (data) =>{
            if(data['id']==id){
              data['数量']= newnum ? newnum : num;
              data['到期日']= newdqr ? newdqr : dqr;
            }   
          } 
        )
      } else {
        ElMessage.success({
          showClose: true,
          message: "错了哦，这是一条错误消息",
          type: "error",
        });
      }
    };
    loaded();
    return { ...toRefs(data), getSummaries,preservation };
  },
};
</script>